﻿@model string

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section JavascriptInHead{
    <script src="~/Scripts/Courses/courses-controller.js"></script>
    <script type="text/javascript">    
        //create a service which would be hooked into the controller for data retrieval
        // the module which is known to the html page section or entire page is acting a logical container for service 
        registrationModule.factory('bootstrappedCourses', function ()
        {
            return {
                courses: @Html.Raw(Model)
                };
        });
        
    </script>
}

<div class="container" ng-controller="CoursesController">
    <div class="row">
        <div class="span10">
            <h2>Courses</h2>
        </div>
    </div>
    <div class="row">
        <div class="span10">
            <table class="table  table-condensed table-hover"
                <tr>
                    <th>Course</th>
                    <th>Course Name</th>
                    <th>Instructor</th>
                </tr>
                <tr ng-repeat="course in courses">
                    <td>{{course.number}}</td>
                    <td>{{course.name}}</td>
                    <td>{{course.instructor}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>